<template>
    <div class="configuration-container">
        <el-form :model="model" ref="ruleFormRef" :rules="rules">
            <el-form-item label="创建子账号" required prop="is_enable">
                <template #default>
                    <div class="create-account">
                        <el-switch v-model="model.is_enable" :active-value="2" :inactive-value="1" />
                        <span>开启后，指定部门的员工在企微端授权客易达应用时，同时创建子账号。</span>
                        <div class="tips">
                            <div>注意：</div>
                            <div>
                                <p>1、自动创建子账号时，若子账号数量不够时，员工子账号将不再创建；</p>
                                <p>2、账号：手机号，初始密码：Keyid_+手机号后四位；</p>
                                <p>3、创建子账号默认给系统普通员工权限，若需变更请手动调整。</p>
                            </div>
                        </div>
                    </div>
                </template>
            </el-form-item>
            <el-form-item label="选择部门" v-if="model.is_enable == 2" required>
                <div class="dep-wrap">
                    <div class="dw-btn">
                        <el-button @click="handleDepart">选择部门</el-button>
                        已选部门下员工创建时自动创建子账号，并开启。
                    </div>
                    <div class="dw-tags">
                        <el-tag
                            v-for="tag in deps"
                            :key="tag.id"
                            class="mx-1"
                            closable
                            :disable-transitions="false"
                            @close="handleCloseDep(tag)">
                            {{ tag.name }}
                        </el-tag>
                    </div>
                </div>
            </el-form-item>
        </el-form>

        <ZWDepartment v-model:show="showdepat" :isMember="false" :selectedMember="deps" @submit="getDepart" />
    </div>
</template>

<script lang="tsx" setup>
import { reactive, ref } from 'vue';
import { getAdvanceSetting } from '@/api/employe/employeemanage/manage';

import type { FormInstance, FormRules } from 'element-plus';
import { ElMessage } from 'element-plus';

import ZWDepartment from '@/components/zw/department/Department';

let ruleFormRef = ref<FormInstance>();

let deps = ref([]);
let depIds = ref([]);

const model = reactive({
    is_enable: 1,
    department_list: []
});

const rules = reactive<FormRules>({
    is_enable: [
        {
            required: true,
            message: '',
            trigger: 'change'
        }
    ]
});

const showdepat = ref(false);
const openDeprtment = () => {
    showdepat.value = !showdepat.value;
};

const getDepart = (val: any) => {
    deps.value = val;
    showdepat.value = false;
};

const submitFormExpose = () => {
    console.log(model);
    model.department_list = deps.value;
    if (model.is_enable == 1) {
        model.department_list = [];
    }
    if (model.is_enable == 2 && model.department_list.length <= 0) {
        ElMessage.error('请选择部门');
        return;
    }
    return model;
};

const handleDepart = () => {
    showdepat.value = !showdepat.value;
};

const handleCloseDep = (val: any) => {
    deps.value.splice(deps.value.indexOf(val), 1);
};

const getConfig = async () => {
    const res = await getAdvanceSetting({});
    deps.value = res.department_list;
    model.is_enable = res.is_enable;
    model.department_list = res.department_list;
};

getConfig();

defineExpose({
    submitFormExpose
});
</script>

<style lang="scss" scoped>
.configuration-container {
    .create-account {
        font-size: 14px;
        font-weight: 400;
        color: #969696;
        line-height: 14px;
        span {
            padding-left: 8px;
        }

        .tips {
            width: 464px;
            padding: 16px 0;
            background: #fffaf9;
            color: #585858;
            display: flex;
            align-items: start;
            justify-content: center;
            flex-direction: column;
            line-height: 20px;
            padding-left: 16px;
            margin-top: 10px;
            div {
                color: #ff6b00;
            }
            p {
                color: #585858;
            }
        }
    }

    .dep-wrap {
        .dw-btn {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #969696;
            line-height: 14px;
        }
        .dw-tags {
            margin-top: 10px;
        }
    }

    .mx-1 {
        margin-left: 0.25rem;
        margin-right: 0.25rem;
    }
}
</style>
